<template>
	<!-- 弹窗，选性别，选时间 -->
	<view>
		<view class="information">
			<view class="Mine-though">
				<text>头像</text>
				<image :src="userInfo.avatar" mode="" @click="chooseImage"></image>
			</view>
			<view>
				<view class="Mine-though" @click="handleEdit('昵称', 'nickName', userInfo.nickName)">
					<text>昵称</text>
					<view class="arrowhead">
						<text class="though">{{ userInfo.nickName }}</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
			<view>
				<view class="Mine-though" @click="handleEdit('电话', 'phone', userInfo.phone)">
					<text>电话</text>
					<view class="arrowhead">
						<text class="though" v-if="userInfo.phone">{{ userInfo.phone }}</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
			
			<view>
				<view class="Mine-though" @click="handlePicker">
					<text>性别</text>
					<view class="arrowhead">
						<text class="though">{{ userInfo.sex == 0 ? '男' : '女' }}</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
			<view>
				<view class="Mine-though" @click="handleDateTimePicker">
					<text>生日</text>
					<view class="arrowhead">
						<text class="though" v-if="userInfo.birthday">{{ userInfo.birthday }}</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
		</view>
		
		<u-modal :show="showModal" @confirm="handleModalConfirm" @close="handleCloseModal" closeOnClickOverlay="true">
			<text class="nickname">{{ modalLabel }}</text>
			<view class="Text-box">
				<u--input border="surround" v-model="modalValue"></u--input>
			</view>
		</u-modal>
		
		<u-picker
			:show="showPicker"
			:columns="columns"
			:defaultIndex="defaultIndex"
			@confirm="handlePickerConfirm"
			@cancel="showPicker = false"
			@close="showPicker = false"
			closeOnClickOverlay="true"
		></u-picker>
		
		
		<u-datetime-picker
			:show="showDateTimePicker"
			v-model="dateTimeValue"
			mode="date"
			@confirm="dateTtimePickerConfirm"
			@cancel="showDateTimePicker = false"
			@close="showDateTimePicker = false"
			closeOnClickOverlay="true"
			:minDate="0"
			:maxDate="Number(new Date())"
		></u-datetime-picker>
	</view>
</template>

<script>
	import { formatDate } from '@/common/date.js'
	import { editPersonMessage } from "@/common/http.api.js"
	import { uploadUrl } from '@/common/http.interceptor.js'
	export default {
		data() {
			return {
				uploadUrl,
				userInfo: this.$store.state.userInfo,
				modalLabel: '',
				currentKey: '',
				modalValue: '',
				showModal: false,
				showPicker: false,
				columns: [['男','女']],
				defaultIndex: [],
				showDateTimePicker: false,
				dateTimeValue: 0
			}
		},
		computed: {
			birthday() {
				let date = new Date(this.value3)
				return date.getFullYear()+'年'+(date.getMonth()+1)+'月'+date.getDate()+'日'
			}
		},
		methods: {
			handleEdit(label, key, value) {
				this.modalLabel = label
				this.currentKey = key
				this.modalValue = value
				this.showModal = true
			},
			handleCloseModal() {
				this.showModal = false
			},
			handleModalConfirm() {
				const params = { ...this.userInfo }
				params[this.currentKey] = this.modalValue
				editPersonMessage(params).then( res => {
					uni.showToast({
						icon: 'success',
						title: '修改成功'
					})
					this.userInfo = { ...params }
					this.$store.commit('SET_USERINFO', this.userInfo)
					uni.setStorageSync('scan-userinfo', JSON.stringify(this.userInfo))
					this.showModal = false
				})
			},
			handlePicker() {
				this.defaultIndex[0] = this.userInfo.sex
				this.showPicker = true
			},
			handlePickerConfirm(value) {
				const params = { ...this.userInfo }
				params.sex = value.indexs[0]
				editPersonMessage(params).then( res => {
					uni.showToast({
						icon: 'success',
						title: '修改成功'
					})
					this.userInfo = { ...params }
					this.$store.commit('SET_USERINFO', this.userInfo)
					uni.setStorageSync('scan-userinfo', JSON.stringify(this.userInfo))
					this.showPicker = false
				})
			},
			handleDateTimePicker() {
				this.dateTimeValue = new Date(this.userInfo.birthday).getTime()
				this.showDateTimePicker = true
			},
			dateTtimePickerConfirm(value) {
				const params = { ...this.userInfo }
				params.birthday = formatDate(value.value)
				editPersonMessage(params).then( res => {
					uni.showToast({
						icon: 'success',
						title: '修改成功'
					})
					this.userInfo = { ...params }
					this.$store.commit('SET_USERINFO', this.userInfo)
					uni.setStorageSync('scan-userinfo', JSON.stringify(this.userInfo))
					this.showDateTimePicker = false
				})
			},
			chooseImage() {
				uni.chooseImage({
					success: (chooseImageRes) => {
						// 选择成功后会执行这个
						// console.log(chooseImageRes, 'chooseImageRes')
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: this.uploadUrl,
							filePath: tempFilePaths[0],
							name: 'file',
							success: res => {
								console.log(res)
								const params = { ...this.userInfo }
								params.avatar = JSON.parse(res.data).msg
								editPersonMessage(params).then( res => {
									uni.showToast({
										icon: 'success',										title: '修改成功'
									})
									this.userInfo = { ...params }
									this.$store.commit('SET_USERINFO', this.userInfo)
									uni.setStorageSync('scan-userinfo', JSON.stringify(this.userInfo))
								})
							},
							fail: err => {
								console.log(err)
							}
						})
					},
					fail: chooseImageFail => {
						// 选择失败后会执行
						console.log(chooseImageFail, 'chooseImageFail')
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #eee;
	}

	.information {
		padding-top: 10rpx;
		width: 100%;
		background-color: #fff;
	}

	.information .Mine-though {
		display: flex;
		background-color: #fff;
		height: 100rpx;
		line-height: 100rpx;
		justify-content: space-between;
		border-bottom: solid #eee thin;
	}

	.information .Mine-though .arrowhead {
		display: flex;
	}

	.information .Mine-though image {
		height: 100rpx;
		width: 100rpx;
		margin-right: 40rpx;
		border-radius: 10rpx;
		border-radius: 50%;
	}

	.information .Mine-though text {
		margin: 0 20rpx 0 40rpx;
		font-size: 35rpx;
		font-weight: bold;
	}

	.information .Mine-though .arrowhead .though {
		font-weight: normal;
		margin: 0;
	}

	.nickname {
		font-weight: bold;
		font-size: 35rpx;
		margin-right: 20rpx;
		line-height: 80rpx;
	}

	.information .Text-box {
		width: 80%;

	}

	.information u-modal {
		padding: 0;
	}
</style>
